<template>
	<div id="AddEdit">
		<x-header :left-options="{showBack: false}" title="编辑地址" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
			<a slot="right" class="save" @click="saveEditInfo">保存</a>
		</x-header>
		<form action="" id="addForm">
			<x-input type="text" class="name" :value="receiver.receiver_name" @input="nameInput($event)" placeholder="请输入联系人" />
			<x-input type="text" class="name" :value="receiver.receiver_tel" @input="mobileInput($event)" :show-clear="false" keyboard="number" is-type="china-mobile" required placeholder="请输入手机号" />
			<group class="address">
				<x-address class="block" title="" v-model="addressValue" @on-shadow-change="onShadowChange" :list="addressData" value-text-align="left" label-align="justify">
				</x-address>
			</group>
			<div class="text">
				<x-textarea :value="receiver.receiver_address" @input="addressInput($event)" name="" id="txt" :cols="30" :rows="7" placeholder="请输入详细地址如街道、楼牌号等">
				</x-textarea>
			</div><br /><br /><br />
			<div class="default">
				<span>设为默认地址</span>
				<div class="circle">
					<check-icon :value.sync="agree"></check-icon>
				</div>
			</div>
		</form>
		<toast v-model="success" type="text" width="3.5rem">{{msg}}</toast>
	</div>
</template>

<script>
	import { XHeader, ChinaAddressData, XAddress, CheckIcon, XInput, XTextarea, Group, Toast } from 'vux'
	export default {
		data() {
			return {
				username: '',
				tel: '',
				addressData: ChinaAddressData,
				addressValue: ['河南省', '郑州市', '二七区'],
				agree: false,
				receiver: '',
				street: '',
				success: false,
				msg: '',
				receiver_province: '',
				receiver_city: '',
				receiver_county: '',
				receiver_address: '',
				defaults: ''

			}
		},
		components: {
			XHeader,
			ChinaAddressData,
			XAddress,
			CheckIcon,
			XInput,
			XTextarea,
			Toast,
			Group
		},
		activated() {
			this.getEditInfo();
		},
		methods: {
			getEditInfo: function() {
				let receiver_id = this.$route.params.id;
				this.$http({
					method: 'GET',
					url: '/los/api/member/receiver_info.json?receiver_id=' + receiver_id,
					data: ''
				}).then((result) => {
					console.log(result);
					this.receiver = result.data.receiver;
					if(this.receiver.receiver_default == 1) {
						this.agree = true;
					}
					this.addressValue = [this.receiver.receiver_province, this.receiver.receiver_city, this.receiver.receiver_county];
				}).catch((err) => {
					console.log(err);
				})
			},
			onShadowChange: function(ids, names) {
				this.addressValue = names;
				this.receiver_province = this.addressValue[0];
				this.receiver_city = this.addressValue[1];
				this.receiver_county = this.addressValue[2];
			},
			saveEditInfo: function() {
				let receiver_id = this.$route.params.id;
				if(this.agree == true) {
					this.defaults = 1;
				} else {
					this.defaults = 0;
				}
				var params = {
					receiver_name: this.username,
					receiver_tel: this.tel,
					receiver_address: this.street,
					receiver_default: this.defaults,
					receiver_province: this.receiver_province,
					receiver_city: this.receiver_city,
					receiver_county: this.receiver_county,
					receiver_id: receiver_id
				}
				this.$http({
					method: 'POST',
					url: '/los/api/member/receiver_edit.json',
					data: params
				}).then((result) => {
					console.log(result);
					if(result.data.code == 1) {
						this.success = !this.success;
						this.msg = result.data.msg;
						setTimeout(function() {
							location.href = '#/AddManage'
						}, 1000)
					}
				}).catch((err) => {
					console.log(err);
				})
			},

			nameInput: function(e) {
				this.username = e;
			},
			mobileInput: function(e) {
				this.tel = e;
			},
			addressInfo: function(e) {
				this.street = e;
			},
			addressInput: function(e) {
				this.street = e;
			},

			back: function() {
				window.history.go(-1);
			}
		}
	}
</script>

<style scoped>
	.header {
		background: #fff;
	}
	
	.vux-header-right .save {
		color: #333;
		font-size: 0.37rem;
	}
	
	#addForm {
		position: relative;
		width: 100%;
		height: 100%;
	}
	
	#addForm:after {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #f3f3f3;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}
	
	.name {
		background: #fff;
		height: 1.3rem;
		line-height: 1.3rem;
	}
	
	#addForm input {
		padding: 0.26rem;
		width: 100%;
		height: 1.3rem;
		line-height: 1;
		font-size: 0.37rem;
		color: #333;
	}
	
	#addForm .block {
		width: 100%;
		overflow: hidden;
	}
	
	#addForm .text {
		width: 100%;
		height: 2.8rem;
		overflow: hidden;
		background: #fff;
		position: relative;
	}
	
	#addForm .text:after {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #f3f3f3;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}
	
	#addForm .text #txt {
		resize: none;
		height: 100%;
		color: #aaa;
	}
	
	#addForm .default {
		width: 100%;
		height: 1.3rem;
		line-height: 1.3rem;
		background: #fff;
		padding: 0 0.26rem;
		overflow: hidden;
		margin-top: 0.26rem;
	}
	
	#addForm .default span {
		color: #333;
		font-size: 0.37rem;
		display: inline-block;
		line-height: 1.3rem;
	}
	
	#addForm .default .circle {
		float: right;
	}
	
	.vux-cell-box {
		background: #fff;
	}
	
	.vux-cell-box:not(:first-child):before {
		border: none!important;
	}
	
	.vux-cell-box {
		height: 1.3rem;
	}
	
	.vux-tap-active {
		padding: 0!important;
	}
	
	.weui-cell:before {
		left: 0;
	}
	
	.weui-input {
		margin-left: 0.26rem!important;
	}
	
	.weui-cell:before {
		border-top: solid 1px #f3f3f3;
	}
	
	#addForm .address {
		position: relative;
		margin-top: 0.01rem;
	}
	
	/*#addForm .address:before {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #f3f3f3;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}*/
</style>